<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
 
body {
  font-family: sans-serif;
}

#addButton {
  margin: 0 10px;
}

.description {
  margin: 0 10px;
}

#chartContainer {
  display: flex;
}

.no-flex #chartContainer {
  display: inline;
}

.resizable { 
  display: inline-block;
  width: 150px; 
  height: 150px; 
  padding: 0em; 
  padding-bottom: 2em;
  margin: 1em;
  font-size: 10px;
  background: #EFEFEF;
}

.resizable h3 { 
  text-align: center; 
  margin: 0;
  height: 16px;
  border: none;
  cursor: default;
}

.resizable svg {
  width: 100%;
  height: 100%;
}


.arc {
  stroke: #666666;
  stroke-width: 0.5;
}

text {
  font: 8px sans-serif;
  pointer-events: none;
}

text.id {
  text-anchor: middle;
  font-weight: bold;
}

.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  z-index: 0 !important;
}
</style>
</head>
<body>
  <div id="chartContainer"></div>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
		<script
		src="${pageContext.request.contextPath}/static/fw/plugin/dimple/dist/dimple.v2.3.0.js"
		charset="utf-8"></script>
	<script> 
    // Create the svg and set the dimensions
    var svg = dimple.newSvg("#chartContainer", 590, 410); 
    d3.tsv("${pageContext.request.contextPath}/dimple/example_data.tsv", function (data) {
   var myChart = new dimple.chart(svg, data);
      myChart.setBounds(60, 30, 510, 305)  
	    myChart.addCategoryAxis("x", ["价格梯度", "渠道"]);
      myChart.addMeasureAxis("y", "销售额"); 
      myChart.addSeries("拥有人", dimple.plot.bar);
      myChart.addLegend(65, 10, 510, 20, "right");
      myChart.draw();
    });
	</script>
</body>
</html>